<template>
  <view class="x-product" :class="{'is-single': single}" @click="onDetail">
    <view class="_pic">
      <view class="_sign" v-if="sign.enable">
        <x-image :src="signSrc"></x-image>
      </view>
      <x-image :src="productPic" />
    </view>
    <view class="_info">
      <div class="top">
        <view v-if="isTitle && detail.productTitle" :class="['_title',`_title-${single ? 1 : 2}`]">{{ detail.productTitle }}</view>
        <view v-if="detail.salesNum && buying.enable && [1, 2, 3, 4, 5].includes(buying.value) || single" class="_sales">
          <text>总售{{ numberFormat(detail.salesNum) }}件</text>
        </view>
        <view class="_discount" :style="{'visibility': detail.couponType === 0 ? 'hidden' : ''}">
          <view class="_title">
            <text class="_tips" >
              <text v-if="detail.couponType === 1">满{{ detail.transactionAmount }}</text>
              <text v-else>立</text>
              减{{ detail.couponAmount }}元
            </text>
          </view>
        </view>
      </div>

      <div class="bottom">
        <view class="_price">
          <view class="_left flex flex1">
            <view class="flex1">
              <text v-if="detail.couponType === 2" class="_text">券后</text>
              <x-price
                v-if="detail.couponType === 2"
                :price="detail.subsidyPrice ? (detail.subsidyPrice - detail.couponAmount > 0 ? detail.subsidyPrice - detail.couponAmount : '0.01' )
              : (detail.productPrice - detail.couponAmount > 0 ? detail.productPrice - detail.couponAmount : '0.01')"
                color="#DE3A2E"
                :TipsSize="26"
                :Price1Size="38"
                :Price2Size="26"
              />
              <x-price v-else-if="detail.subsidyPrice" :price="detail.subsidyPrice" color="#DE3A2E" :TipsSize="26" :Price1Size="38" :Price2Size="26"/>
              <x-price v-else :price="detail.productPrice" color="#DE3A2E" :TipsSize="26" :Price1Size="38" :Price2Size="26"/>
            </view>
            <view v-if="detail.salesNum && [6, 7, 8].includes(buying.value) && !single || !buying.enable" class="_sales">总售{{ numberFormat(detail.salesNum) }}件</view>
          </view>

          <view class="_right">
            <view class="_buying-rt-bx" v-if="buying.enable && [1,2,3,4,5].includes(buying.value)">
              <view v-if="buying.value === 1" class="_buying style-1">
                <x-icon name="icon-060" size="32" color="#FFFFFF" />
              </view>
              <view v-else-if="buying.value === 2" class="_buying style-2">
                <x-icon name="icon-059" size="32" color="#DE3A2E" />
              </view>
              <view v-else-if="buying.value === 3" class="_buying style-3">
                <x-icon name="icon-014" size="32" color="#FFFFFF" />
              </view>
              <view v-else-if="buying.value === 4" class="_buying style-4">
                马上抢
              </view>
              <view v-else-if="buying.value === 5" class="_buying style-5">
                马上抢
              </view>
            </view>
          </view>
        </view>

        <view class="_buying-bt-bx" v-if="buying.enable && [6,7,8].includes(buying.value)">
          <view v-if="buying.value === 6" class="_buying">
            <x-icon name="icon-060" size="32" color="#ffffff" />
            <text class="text">点击购买</text>
          </view>
          <view v-else-if="buying.value === 7" class="_buying">
            <x-icon name="icon-058" size="32" color="#ffffff" />
            <text class="text">立即购买</text>
          </view>
          <view v-else-if="buying.value === 8" class="_buying">
            <x-icon name="icon-014" size="32" color="#ffffff" />
            <text class="text">立即购买</text>
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import $sr from '@/utils/x-sr';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import XPrice from '../x-price';
import navigateTo from '@/utils/x-navigate';

export default {
  name: 'HProduct',
  components: {
    XPrice,
    XImage,
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    isTitle: {
      type: Boolean,
      default: true
    },
    isSales: {
      type: Boolean,
      default: true
    },
    // 单排
    single: {
      type: Boolean,
      default: false
    },
    // 角标
    sign: {
      type: Object,
      default: () => ({
        enable: false,
        value: 1
      })
    },
    // 购买按钮
    buying: {
      type: Object,
      default: () => ({
        enable: false,
        value: 1
      })
    },
    componentId: {
      type: [String, Number],
      default: ''
    },
    // 来源
    source: {
      type: String,
      default: 'list'
    },
    sourcePageType: {
      type: [String, Object],
      default: '1'
    },
    sourcePageId: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: [String, null],
      default: ''
    }
  },
  data() {
    return {};
  },
  computed: {
    signSrc() {
      return `/assets/images/sign-${this.sign.value}.png`;
    },
    productPic() {
      const url = this.detail.productMainPic;
      return this.$tools.formatOss(url, 300);
    },
    saleAmount() {
      return this.$tools.formatNumber(this.detail.saleAmount);
    },
    actualAmount() {
      return this.$tools.formatNumber(this.detail.actualAmount);
    },
    // 销量展示逻辑 是否展示销量:1-不展示；2-saleNum大于sales 展示saleNum；3-saleNum+sales
    saleNum() {
      // 销量展示规则：0-4位数销量销量展示样式为“0件-9999件” 5位及5位以上销量，展示样式为“1万-N万”中间值为1.1万、1.2万等 不足1.1万时，展示1万+
      if (this.detail.showSales === 2) {
        const count = this.detail.saleNum;
        const sales = this.detail.sales; // 后台设置的销量临界值
        const suffix = count > 10000 ? (count < 11000 ? '+' : '') : '';
        if (count <= sales) {
          return false;
        }
        return this.$tools.formatCount({
          count,
          suffix
        });
      } else if (this.detail.showSales === 3) {
        const count = this.detail.saleNum + this.detail.sales;
        const suffix = count > 10000 ? (count < 11000 ? '+' : '') : '';
        return this.$tools.formatCount({
          count,
          suffix
        });
      } else {
        return false;
      }
    }
  },
  watch: {},
  created() {
    this.srTrack('expose_sku_component');
  },
  methods: {
    numberFormat(val) {
      return this.$tools.numberFormat(val);
    },
    onDetail() {
      this.srTrack('trigger_sku_component');
      if (this.detail.productType && this.detail.productType === 3) {
        // 投放商品详情页
        this.$XTrack('onListToDetailEvent', {
          pageId: this.detail.productId,
          type: 1
        });
        const item = this.detail;
        item.linkType = 16;
        item.linkContent = item.pageId;
        navigateTo(item, {
          sourcePageType: this.sourcePageType,
          sourcePageId: this.sourcePageId,
          source: this.source,
          groupsSource: this.groupsSource
        });
      } else {
        this.$XTrack('onListToDetailEvent', {
          componentId: this.componentId,
          productId: this.detail.productId,
          type: 0
        });
        const query = this.$tools.object2param({
          productId: this.detail.productId,
          sourcePageType: this.sourcePageType,
          sourcePageId: this.sourcePageId,
          source: this.source
        });
        uni.navigateTo({
          url: `/pages/transit-product/index?${query}`
        });
      }
    },
    // 有数上报
    srTrack(name) {
      $sr.trackProductCard(name, this.detail);
    }
  }
};
</script>

<style lang="scss">
  .x-product{
    border-radius: 10px; overflow: hidden; background-color: #fff;
    ._pic{
      position: relative;
      height: 345px;
      .el-image{ width: 100%; height: 100%;}

      ._sign{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 74px;
        height: 74px;
      }
    }
    ._info{
      background-color: #fff; padding: 15px 15px 12px; color: #F41D1D;
      //min-height: 208px;
    }
    ._title{ font-size: 28px; color: #333333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;text-align: left;
      &._title-1 {
        //height: 76px;
        -webkit-line-clamp: 2;
      }
      &._title-2 {
        //height: 38px;
        -webkit-line-clamp: 1;
      }
    }
    ._price{
      display: flex; align-items: center;justify-content: space-between;
      //._new{
      //  font-size: 32px; font-weight: bold; display: flex; align-items: center; flex: 1;
      //  ._unit{ font-size: 24px;}
      //}
      //._old{ padding-left: 5px; font-size: 24px; min-height: 34px; text-decoration: line-through; color: #A4A4A4;}
      ._left{
        ._text{
          color: #DE3A2E;
          font-size: 22px;
          margin-right: 4px;
        }
        display: flex;align-items: baseline;
      }
      ._buying-rt-bx{
        text-align: center;
        ._buying{
          display: inline-block;
          color: #DE3A2E;
          border-radius: 50%;
          background: #DE3A2E;
          &.style-1{
            background: #DE3A2E;
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &.style-2{
            background: #FFFFFF;
            width: 54px;
            height: 54px;
            border: 2px solid #DE3A2E;
            color: #DE3A2E;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &.style-3 {
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &.style-4{
            padding: 0px 12px;
            color: #ffffff;
            border-radius: 6px;
            background: #DE3A2E;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &.style-5{
            padding: 0px 12px;
            border-radius: 8px;
            border: 2px solid #DE3A2E;
            background: #ffffff;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    ._sales{ font-size: 24px; color: #A4A4A4; min-height: 34px;}
    ._discount{
      margin-top: 6px;
      display: flex; align-items: center; font-size: $uni-font-size-sm;
      margin-bottom: 10px;
      ._title{
        flex: 1; text-align: left; align-items: center; height: 40px; overflow: hidden;
        ._tips{
          display: inline-block;
          color: $uni-color-primary;
          background: #FFEAE9;
          text-align: center;
          padding: 0 8px;
          line-height: 32px;
          border-radius: 4px;
          margin-right: 8px;
          font-size: 24px;
          border: 2px solid $uni-color-primary;
        }
      }
    }
    &.is-single{
      display: flex; align-items: center;
      ._pic{ width: 240px; height: 240px;}
      ._info{
        flex: 1; padding: 10px 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 240px;

        .bottom{
          display: flex;
          align-items: center;
          justify-content: space-between;

          ._price{
            flex: 1;
          }
        }
      }
      ._title{ margin-bottom: 0;}
      ._buying-bt-bx{
        margin: 0;
      }
    }

    ._buying-bt-bx{
      margin: 12px 0 8px 0;
      text-align: center;
      ._buying{
        display: inline-flex;
        align-items: center;
        padding: 8px 24px;
        background: #DE3A2E;
        color: #ffffff;
        border-radius: 60px;
        .text{
          margin-left: 6px;
        }
      }
    }
  }
</style>
